<template>
	<div class="big_box">
		<div class="topic_con_scroll">
		  <div class="topic_item" v-if="allquestion.length>0" v-for="(v,n) in allquestion[summarizeIndex]['stem']" :key="n">
		    <div v-for="(v1,n1) in v.question" v-if="v1.type==1">
					  <div class="topic_item_t">
					    <p>Q{{n+1}}</p>
					    <img src="../../assets/image/lesson/answerT.png" alt="">
					    <p style="color: #373737">{{v1.question}}</p>
					  </div>
					  <div class="topic_item_chose" >
					  			  <div class="topic_item_chose_item_father" v-for="(v2,n2) in v1.answer">
					  				  <div class="topic_item_chose_item"  @click="choseitem(v1.answer,v2)"
					  						  :class="{topic_item_is_chose:v2.isChose }"
					  				  >{{v2.answer_content}}
					  				  <div class="ch_box" v-if="n1==3" ></div>
					  				  </div>
					  			  </div>
					  
					  </div>
				  </div>
				<div  v-for="(v1,n1) in v.question" v-if="v1.type==2">
					<div class="topic_item_tips">
								  <span>
									  {{v1.question}}
								  </span>
					</div>
					<div class="topic_item_p">
					  <div v-for="(l,i) in v1.answer" class="item_p_sel"
					   :class="{curr_item_p_sel:l.isChose}"
					  @click="changeItemel(v1.answer,l)">
					    <img v-show="l.isChose" class="target" src="../../assets/image/lesson/target.png" alt="">
					    <span>{{l.letter+'.'}}</span>
								  {{l.answer_content}}
						</div>
					</div>
				</div>
			
		  </div>
		  <div v-if="summarizeIndex<allquestion.length-1" class="next_group" @click="nextGroup">
		    <img src="../../assets/image/lesson/nextGroup.png" alt="">
		  </div>
		</div>
	</div>

</template>

<script>
	export default {
		 name: "mysummary",
		data() {
			return {
				letterArray:['A','B','C','D'],
				  topicList: [
					{tit:'少年用他的智慧打败了巨人。巨人再也不敢来抢他的玩具了', list: ['提高记忆力加工的能力','提高记忆力加工的能力','提高记忆力加工的能力']},
					{tit:'少年用他的智慧打败了巨人。巨人再也不敢来抢他的玩具了', list: ['提高记忆力加工的能力','提高记忆力加工的能力','提高记忆力加工的能力']},
					{tit:'少年用他的智慧打败了巨人。巨人再也不敢来抢他的玩具了', list: ['提高记忆力加工的能力','提高记忆力加工的能力','提高记忆力加工的能力']}
				  ],
				  currItemel: -1,
				  choseitemFlag:-1,
				  allquestion:[],
				  summarizeIndex:0
				 
			}
		},
		props:['questionList',],
		mounted() {
			console.log(this.$store.state.summarizeIndex)
			this.summarizeIndex=this.$store.state.summarizeIndex
			this.$emit('setSummarizeIndex',this.summarizeIndex)
			this.renderpage()
			console.log(this)
			// this.$emit("showloading",{
			// 	methods:'push',
			// 	path:'/score'
			// })

			// this.clearVuex()
		},

		watch: {

		},
		methods:{
			
			renderpage(){
					  this.$request.get("getWordLogiclist", {
					  }).then((res) => {
					  	// console.log(res.data.data)
						for(var i=0;i<res.data.data.length;i++){
							for(var k=0;k<res.data.data[i]['stem'].length;k++){
								for(var j=0;j<res.data.data[i]['stem'][k].question.length;j++){
									for(var o=0;o<res.data.data[i]['stem'][k].question[j].answer.length;o++){
										//多个未答题型 怎么办
										// console.log(this.$store.state.summarizequestionArray)
										res.data.data[i]['stem'][k].question[j].answer[o].isChose=false
										if(this.$store.state.summarizequestionArray){
											for(var q=0;q<this.$store.state.summarizequestionArray.length;q++){
												for(var w=0;w<this.$store.state.summarizequestionArray[q]['stem'].length;w++){
													for(var e=0;e<this.$store.state.summarizequestionArray[q]['stem'][w].question.length;e++){
														for(var r=0;r<this.$store.state.summarizequestionArray[q]['stem'][w].question[e].answer.length;r++){
															if(res.data.data[i]['stem'][k].question[j].answer[o].id==this.$store.state.summarizequestionArray[q]['stem'][w].question[e].answer[r].id){
																res.data.data[i]['stem'][k].question[j].answer[o].isChose=this.$store.state.summarizequestionArray[q]['stem'][w].question[e].answer[r].isChose
															}
														}
													}
												}
											}
										}
									}
								}
							}
						}
						this.allquestion=res.data.data
						console.log(this.allquestion)
						//用nextgroup来驱动倒计时 应该是0
						this.$emit('countdown',this.allquestion[this.summarizeIndex].current_time,this.allquestion[this.summarizeIndex].end_time)
					  }).catch((err) => {
					  	// this.$message({
					  	//           message: '警告哦，这是一条警告消息',
					  	//           type: 'warning'
					  	//         });
					  })
			},
			saveQuestion(){
				this.$store.commit('setsummarizequestionArray',this.allquestion)
			},
			nextGroup(flag){
				if(this.summarizeIndex==this.allquestion.length-1){
					//提交
					this.submit()
					return
				}
				//必须用index来驱动
				// if(!flag){
					this.summarizeIndex++
				// }
				this.$emit('setSummarizeIndex',this.summarizeIndex)
				this.$store.commit('setSummarize',this.summarizeIndex)
				this.$emit('countdown',this.allquestion[this.summarizeIndex].current_time,this.allquestion[this.summarizeIndex].end_time)
				console.log(this.summarizeIndex)
				console.log(this.$store.state.summarizeIndex)
			},
			submit(){
				console.log('submit')
				var arr=[]
				this.allquestion
				for(var i=0;i<this.allquestion.length;i++){
					for(var k=0;k<this.allquestion[i]['stem'].length;k++){
						for(var j=0;j<this.allquestion[i]['stem'][k].question.length;j++){
							for(var o=0;o<this.allquestion[i]['stem'][k].question[j].answer.length;o++){
								if(this.allquestion[i]['stem'][k].question[j].answer[o].isChose){
									arr.push({
										test_id:this.allquestion[i].test_id,
										id:this.allquestion[i]['stem'][k].question[j].id,
										answer:this.allquestion[i]['stem'][k].question[j].answer[o].id
									})
								}
							}
						}
					}
				}
				console.log(arr)
				// return
				this.$request.post("saveWordLogicTest", {
					question:JSON.stringify(arr),
					test_id:this.allquestion[0].test_id
				}).then((res)=>{
					console.log(res.data.code)
					if(res.data.code==200){
						this.clearVuex()
						this.$emit('Jump','/score',
							{test_id:this.allquestion[0].test_id,
							 test_type:'wordlogic'
							})
						
					}
				})
			},
			
			//结束之后清除
			clearVuex(){
				this.$store.commit('setSummarize',0)
				this.$store.commit('setsummarizequestionArray',null)
			},
			changeItemel(array,v){
				//点一次存一次
				
			 for(var i=0;i<array.length;i++){
			 	array[i].isChose=false
			 }
			 v.isChose=true

			this.saveQuestion()
			},
			choseitem(array,v){
				//点一次存一次
				for(var i=0;i<array.length;i++){
					array[i].isChose=false
				}
				v.isChose=true
			
				this.saveQuestion()
			},
			gome(){
			
			},
      // 前往首页
      goHome(){


      }
		}
	}
</script>
<style lang="less" scoped>
	.big_box{
		padding: 1.17rem 0.6rem 0.38rem 0.97rem;
		box-sizing: border-box;
		height: 100%;
		width: 100%;
	}
    .topic_con_scroll{
      overflow-y: scroll;
      height: 100%;
      //火狐浏览器隐藏滚动条
      & {
        scrollbar-color: #9eb0e6 #f7f7f9;
        scrollbar-width: thin;
        scrollbar-track-color: transparent;
        -ms-scrollbar-track-color: transparent;
      }
      /* 设置滚动条的样式 谷歌  */
      &::-webkit-scrollbar {
        width:12px;
      }
      /* 滚动槽 */
      &::-webkit-scrollbar-track {
        -webkit-box-shadow:inset006pxrgba(223, 224, 229);
        border-radius:10px;
      }
      /* 滚动条滑块 */
      &::-webkit-scrollbar-thumb {
        border-radius:10px;
        background:rgba(158, 176, 230);
        -webkit-box-shadow:inset006pxrgba(158, 176, 230);
      }
      &::-webkit-scrollbar-thumb:window-inactive {
        background:rgba(229, 226, 217);
      }
      .topic_item{
        font-size: .21rem;
        .topic_item_t{
          display: flex;
          &>span{
            color: #2175F4;
          }
          &>img{
            margin: 0 .4rem;
            width: 0.75rem;
            height: 0.75rem;
          }
          &>p {
          }
        }
        .topic_item_p{
          display: flex;
          flex-wrap: wrap;
          margin: .3rem 0;
		   padding-left: 1.5rem;
          .item_p_sel{
            position: relative;
            margin: .13rem .4rem;
            // padding: 0 .3rem 0 .6rem;
			padding: 0 .86rem 0 0.98rem;
            height: 0.85rem;
            line-height: 0.85rem;
            text-align: center;
            color: #333;
            font-size: 0.18rem;
            border: 1px solid #c8c7c4;
            border-radius: 45px;
            cursor: pointer;
            .target{
              position: absolute;
              top: 50%;
              left: 0.31rem;
              transform: translateY(-60%);
              width: 0.35rem;
              height: 0.38rem;
            }
          }
          .curr_item_p_sel{
            background: #e8edf3;
          }
        }
      }
      .next_group{
        float: right;
        width: 1.68rem;
        height: 0.66rem;
        cursor: pointer;
		position: relative;
		z-index: 1;
        &>img{
          width: 100%;
          height: 100%;
        }
      }
    }
	.topic_item_chose{
		margin-top: 0.07rem;
		padding-left: 1.8rem;
		// overflow: hidden;
		height: 0.68rem;
		.topic_item_chose_item_father{
			height: 0.52rem;
			// padding:0.08rem 0.1rem ;
			width: 0.92rem;
			border-radius: 0.36rem;
			background: #FFFBF0;
			float: left;
			margin-right: 0.32rem;
			position: relative;
		}
		.topic_item_chose_item{
			width:100%;
			height: 100%;
			// padding: 0 0.24rem;
			line-height: 0.48rem;
			font-size: 0.21rem;
			box-sizing: border-box;
			text-align: center;
			// float: left;
			color: #333333;
			border: 0.04rem solid #F3F2EF;
			border-radius: 0.26rem;
			cursor: pointer;
			margin-right: 0.14rem;
			position: relative;
	
			&>.ch_box{
				width: 0.34rem;
				height: 0.34rem;
				position: absolute;
				right: 0;
				bottom: -0.06rem;
				background-size: 100%;
				background-repeat: no-repeat;
			}
				
			&>.hand_gif{
				width: 1rem;
				height: 1rem;
				position: absolute;
				bottom: -0.5rem;
				right: -0.5rem;
				z-index: 35;
				&>img{
					width: 100%;
					height: 100%;
				}
			}
		}
		.topic_item_chose_item:hover{
			background: #D2DFF6;
			color: #395DD2;
			border: 0.04rem solid #D2DFF6;
		}
		.topic_item_is_chose{
			background: #5B7CE8;
			color: #FFFFFF;
			border: 0.04rem solid #5B7CE8;
		}
	}
	.topic_item_tips{
		font-size: 0.21rem;
		color: #373737;
		padding-left: 1.85rem;
		margin: 0.34rem 0 0.28rem;
		position: relative;
		&>span{
			position: relative;
			&>div{
				height: 0.05rem;
				position: absolute;
				background-color: #5B7CE8;
				border-radius: 0.3rem;
				left: 0%;
				bottom: -10%;
			}
		}
	}
</style>
